<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/layout.xhtml">

    <ui:define name="title">
        Sign out
    </ui:define>

    <ui:define name="head">
        <script type="text/javascript">
            var logout = function() {
                var trollParam = "hack";
                if (getParamValue("reason") === trollParam) {
                    document.getElementById("troll").style.display = "block";

                    var phrase = getParamValue("phrase");
                    if (phrase.length > 0) {
                        document.querySelectorAll("#troll .bottom")[0].innerHTML = phrase;
                    }
                } else {
                    window.location.replace(domainName + "/faces/index.xhtml");
                }
            };

            window.addEventListener("DOMContentLoaded", logout, false);
        </script>
        <style type="text/css">
            /* TROLL */
            #troll {
                background: url('#{request.contextPath}/resources/images/hack.png') no-repeat;
                background-size: contain;
                position: relative;
                top: -15px;
                left: -10px;
                margin-bottom: -30px;
                width: 1000px;
                height: 532px;
            }
            #troll span {
                position: absolute;
                width: 1000px;
                text-align: center;
                font-family: impact;
                font-size: 72px;
                color: white;
                text-shadow: 3px 0px 1px #000000, -3px 0px 1px #000000, 0px 3px 1px #000000, 0px -3px 1px #000000;
            }
            #troll .top {
                top: 10px;
            }
            #troll .bottom {
                width: 800px;
                bottom: 5px;
                left: 100px;
            }
            /* END TROLL */
        </style>
    </ui:define>

    <ui:define name="content">
        #{request.logout()}
        <section class="logout">
            <div id="troll" style="display: none;">
                <span class="top">One does not simply</span>
                <span class="bottom">try to hack the system.</span>
            </div>
        </section>
    </ui:define>

</ui:composition>

